<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页版微信助手</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        #app {
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        /* 未登录区域样式 */
        .wx-container {
            width: 100%;
            max-width: 400px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 30px 20px;
            text-align: center;
        }
        wx-container h1 {
            font-size: 18px;
            font-weight: normal;
            margin-bottom: 30px;
            color: #333;
        }
        
        .box {
            position: relative;
        }
        
        .change-btn {
            position: absolute;
            top: -40px;
            right: 0;
            width: 24px;
            height: 24px;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .change-btn:hover {
            transform: scale(1.1);
        }
        
        .wx-min-box {
            padding: 20px 0;
        }
        
        .wx-min-box div {
            font-size: 16px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .wx-login {
            background-color: #07C160;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
            margin-bottom: 15px;
        }
        
        .wx-login:hover {
            background-color: #06ae56;
        }
        
        .wx-min-box p {
            font-size: 14px;
            color: #999;
        }
        
        .code-img {
            width: 180px;
            height: 180px;
            margin: 15px 0;
        }
        
        /* 已登录区域样式 */
        .wx-chat-box {
            width: 100%;
            max-width: 800px;
            height: 600px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .chat-header-main {
            background-color: #f5f5f5;
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eaeaea;
        }
        
        .chat-header-main div:first-child {
            font-size: 16px;
            color: #333;
        }
        
        .chat-del {
            cursor: pointer;
        }
        
        .del {
            font-size: 18px;
            color: #999;
            transition: color 0.3s;
        }
        
        .del:hover {
            color: #333;
        }
        
        .chat-main-box {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .chat-main-info {
            text-align: center;
            color: #999;
            font-size: 14px;
            margin-top: 30px;
        }
        
        .chat-main-messages {
            flex: 1;
        }
        
        .message-box {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            justify-content: flex-end;
        }
        
        .message {
            background-color: #95ec69;
            padding: 10px 15px;
            border-radius: 4px;
            max-width: 70%;
            margin-right: 10px;
            word-break: break-word;
        }
        
        .header {
            width: 40px;
            height: 40px;
            border-radius: 4px;
        }
        
        .chat-input-box {
            border-top: 1px solid #eaeaea;
            padding: 15px;
        }
        
        .textarea {
            width: 100%;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            padding: 12px;
            font-size: 14px;
            resize: none;
            margin-bottom: 10px;
        }
        
        .textarea:focus {
            outline: none;
            border-color: #07C160;
        }
        
        .chat-send {
            background-color: #07C160;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
            float: right;
            transition: background-color 0.3s;
        }
        
        .chat-send:hover {
            background-color: #06ae56;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .wx-container, .wx-chat-box {
                width: 95%;
            }
            
            .wx-chat-box {
                height: 80vh;
            }
            
            .message {
                max-width: 85%;
            }
        }
        </style>
</head>
<body>
    <div id="app">
        <!-- 未登录区域 -->
        <div class="wx-container" v-if="!isLogin">
            <h1>使用文件传输助手，手机电脑轻松互传文件。</h1>
            <!-- 按钮登录 -->
            <div class="box" v-show="loginType === 0">
                <img class="change-btn" src="assets/二维码登录.png" alt="" v-on:click="loginType = 1">
                <div class="wx-min-box">
                    <div>微信文件传输助手网页版</div>
                    <button class="wx-login" @click="onLogin()">点击登录</button>
                    <p>使用鼠标点击登录传输文件</p >
                </div>
            </div>

            <!-- 二维码登录 -->
            <div class="box" v-show="loginType === 1">
                <img class="change-btn" src="assets/账号登录.png" alt="" v-on:click="loginType = 0">
                    <div>微信文件传输助手网页版</div>
                    <img class="code-img" src="assets/code.png" alt="">
                </div>
            </div>
        </div>

        <!-- 已登录区域 -->
        <div class="wx-chat-box" v-else>
            <!-- 聊天头部区域 -->
            <div class="chat-header-main">
                <div>{{ userInfo.name }}的文件传输助手（{{ userInfo.gender === 0 ? '男' : '女' }}）</div>
                <div class="chat-del">
                    <span class="del">X</span>
                </div>
            </div>

            <!-- 聊天内容区域 -->
            <div class="chat-main-box">
                <div class="chat-main-info" v-if="userInfo.chatList.length <= 0">你可以使用「手机微信>文件传输助手」与电脑互传文件</div>
                <div class="chat-main-messages">
                    <div class="message-box" v-for="item in userInfo.chatList" :key="item.id">
                        <p class="message">{{ item.content }}</p >
                        <img class="header" :src="userInfo.headerImg" alt="头像" />
                    </div>
                </div>
            </div>

            <!-- 聊天输入框区域 -->
            <div class="chat-input-box">
                <textarea class="textarea" v-model="msg" name="" id="" cols="30" rows="8"></textarea>
                <div>
                    <button class="chat-send" @click="onSend()">发送</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp, ref } = Vue
        
        createApp({
            setup() {
                // 定义用户数据
                const userInfo = ref({
                    name: '许世鸿',
                    gender: 0,   // 0：男，1：女
                    headerImg: 'https://dgss0.bdstatic.com/6LZ1dD3d1sgCo2Kml5_Y_D3/sys/portrait/item/58be7169616e6d6f65723031ga17801000000',
                    chatList: [
                        { id: "1", content: "Hello Html" },
                        { id: "2", content: "Hello JavaScript" },
                    ]
                })

                // 编写逻辑代码
                let isLogin = ref(false)
                // 定义一个登录方式：0:按钮登录,1:扫码登录
                let loginType = ref(0)

                // 消息数据
                let msg = ref("")

                // 定义函数
                let onLogin = () => {
                    // 改变登录状态
                    isLogin.value = true
                    // 弹框
                    alert("登录成功！")
                }

                // 发送事件
                const onSend = () => {
                    if (!msg.value.trim()) return
                    
                    // 定义消息对象
                    let obj = {
                        id: new Date().getTime(),
                        content: msg.value
                    }

                    userInfo.value.chatList.push(obj)
                    // 清空数据
                    msg.value = ""
                    
                    // 自动滚动到底部
                    setTimeout(() => {
                        const chatBox = document.querySelector('.chat-main-box')
                        chatBox.scrollTop = chatBox.scrollHeight
                    }, 50)
                }

                // 返回值
                return {
                    userInfo,
                    isLogin,
                    loginType,
                    onLogin,
                    msg,
                    onSend
                }
            }
        }).mount('#app')
    </script>
</body>
</html>